<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <script src="../../js/jquery-1.4.2.js"></script>
</head>
<body>

<div id="selectDiv">
    <select name="province" onclick="checkProvice(this)">
        <option value="0">--选择省份--</option>
        <option value="北京">北京</option>
        <option value="河北">河北</option>
        <option value="河南">河南</option>
        <option value="山西">山西</option>
    </select>

    <select name="city" id="city">
        <option value="0">--请选择城市--</option>
    </select>
</div>
</body>
<script>
    //1.给省份准备城市数据
    var data = {
        "北京":["海淀区","西城区","东城区","延庆区","门头沟区","石景山区","朝阳区","通州区"],
        "河北":["石家庄","张家口","邯郸","保定","唐山","邢台"],
        "河南":["郑州","洛阳","开封","安阳","鹤壁","濮阳","新乡","焦作"],
        "山西":["太原","大同","朔州","忻州","阳泉","吕梁","晋中"]
    }

    function checkProvice(thisObj){
        //获取省份对应的省份
        var prov = $(thisObj).val()
        //获取城市列表
        var citys = data[prov]
        //清空之前的数据
        $("#city").html("")

       if(citys!=null){
            for(var i = 0;i<citys.length;i++){
            $("#city").append("<option>"+citys[i]+"</option>")
        }
       }

    }
</script>
</html>